<template>
    <div class="dialog">
        <div class="dialog__trigger" @click="open">
            <!-- 触发弹窗 -->
            <slot name="trigger"></slot>
        </div>
        <el-dialog
            v-model="visible"
            :custom-class="customClass"
            :center="center"
            append-to-body
            :width="width"
            destroy-on-close
            :close-on-click-modal="clickModalClose"
            @closed="close"
            draggable
            :fullscreen="fullscreen"
        >
            <!-- 弹窗内容 -->
            <template v-if="title" #header>{{ title }}</template>

            <!-- 自定义内容 -->
            <slot>{{ content }}</slot>
            <!-- 底部弹窗页脚 -->
            <template #footer>
                <div class="dialog-footer">
                    <el-button v-if="cancelButtonText" @click="handleEvent('cancel')">
                        {{ cancelButtonText }}
                    </el-button>
                    <el-button
                        v-if="confirmButtonText"
                        type="primary"
                        @click="handleEvent('confirm')"
                    >
                        {{ confirmButtonText }}
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script>
 import { nextTick } from 'vue';
  export default {
    props: {
        title: {
            // 弹窗标题
            type: String,
            default: ''
        },
        content: {
            // 弹窗内容
            type: String,
            default: ''
        },
        confirmButtonText: {
            // 确认按钮内容
            type: [String, Boolean],
            default: '确定'
        },
        cancelButtonText: {
            // 取消按钮内容
            type: [String, Boolean],
            default: '取消'
        },
        width: {
            // 弹窗的宽度
            type: String,
            default: '400px'
        },
        disabled: {
            // 是否禁用
            type: Boolean,
            default: false
        },
        async: {
            // 是否开启异步关闭
            type: Boolean,
            default: false
        },
        clickModalClose: {
            // 点击遮罩层关闭对话窗口
            type: Boolean,
            default: false
        },
        center: {
            // 是否居中布局
            type: Boolean,
            default: false
        },
        customClass: {
            type: String,
            default: ''
        },
        fullscreen:{
            type:Boolean,
            default:false
        }
    },
    data() {
			return {
                
                visible:false,
            }
        },
    methods:{
        open(){
            nextTick(() => {
            this.visible = true;
            })
        },
        close(){
            this.$emit('cancel')
            this.visible = false;
            
            
        },
        handleEvent(type){
            this.$emit(type)
            console.log(type)
            if (!this.async || type === 'cancel') {
                this.close()
            }
            
        }
    }
  
}
</script>

<style scoped lang="scss">
.dialog-body {
    white-space: pre-line;
}
</style>
